<template>
  <div class="sec-one-page">
    <!-- 子页各页 -->
    <video-card-box title="热门推荐" :videos="randomVideo"></video-card-box>
    <video-card-box title="最新视频" :videos="videos.videoList"></video-card-box>
    <div class="nomore-tips">
      <img src="../../assets/no-more-tips.png" alt="">
      <p>只能到这里了~</p>
      <p>我们在客户端不见不散哦</p>
    </div>
  </div>
</template>

<script>
import VideoCardBox from './VideoCardBox'
export default {
  props: ['videos'],
  components: {
    VideoCardBox
  },
  data () {
    return {}
  },
  computed: {
    randomVideo () {
      const random = Math.floor(Math.random() * 16 + (20 - 16))
      return this.videos.videoList.slice(random - 4, random)
    }
  },
  methods: {},
  created () {
    console.log(this.videos)
  }
}
</script>

<style lang="scss">
.sec-one-page {
  background-color: #fff;
  padding: 10px;
  .nomore-tips {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 145px;
      margin-bottom: 10px;
    }
    p {
      color: #999;
      font-size: 13px;
      line-height: 17px;
    }
  }
}
</style>
